<template>
  <div class="home">
    <el-card shadow="never">
      <div id="div1">
        <el-row>
          <el-col :span="24"
            ><div id="div11" class="grid-content bg-purple-dark">
              <span>场馆列表</span>
            </div></el-col
          >
        </el-row>
      </div>
      <div class="zhuti">
      <el-form ref="form" :model="formedit" label-width="80px">
        <el-form-item id="item1" label="场馆编辑"> </el-form-item>

        <el-form-item label="场馆名称">
          <el-input v-model="formedit.name" placeholder="符号健身馆"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formedit.phone" placeholder="18000000000"></el-input>
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="formedit.address" placeholder="省市区"></el-input>
        </el-form-item>
        <div id="div11">
          <img id="img1" src="../../assets/images/1.jpg" alt="" />
        </div>

        <el-form-item label="邮箱">
          <el-input v-model="formedit.email" placeholder="1222@163.com"></el-input>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="formedit.sort" placeholder="2"></el-input>
          <span>排序数字越大越靠前</span>
        </el-form-item>

        <el-form-item label="状态">
          <div class="xuanze">
            <el-radio v-model="formedit.status" label=1>正常</el-radio>
            <el-radio v-model="formedit.status" label=2>弃用</el-radio>
          </div>
        </el-form-item>

        <!--图片部分  -->
        <div id="tupian" >
          <img :src="this.formedit.image" alt="" class="imgload">
          <el-upload  ref='upload' v-model="image"  action="#http://172.16.10.50:8080/gym/uploadImage" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
     
    <!-- 介绍，场馆介绍 -->
    <el-form-item label="介绍" >
          <el-input
            class="venuedescript"
            type="textarea"
            v-model="formedit.description"
            placeholder="场馆介绍"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 下面那个板块 -->
      <div id="div5">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-form-item label="名称">
                  <el-input
                   v-model="formInline.name1"
                    placeholder="名称"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="容纳人数">
                  <el-input
                    v-model="formInline.container1"
                    placeholder="容纳人数"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="4"
              >
            </el-col>
          </el-row>
          <!--第二行  -->
          <el-row>
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-form-item label="名称">
                  <el-input
                      v-model="formInline.name2"
                    placeholder="名称"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="容纳人数">
                  <el-input
                    v-model="formInline.container2"
                    placeholder="容纳人数"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="4"
              >
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-form-item label="名称">
                  <el-input
                    v-model="formInline.name3"
                    placeholder="名称"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="容纳人数">
                  <el-input
                   v-model="formInline.container3"
                    placeholder="容纳人数"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="4"
              >
            </el-col>
          </el-row>
        </el-form>
        <el-row id="save">
          <el-button type="primary" @click="save">保存</el-button>
        </el-row>
      </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
        image:"",
        id:window.sessionStorage.getItem("id"),//获取前面编辑传过来的
      dialogImageUrl: "", //照片那里
        dialogVisible: false,
        disabled: false,
      textarea: "",
      formInline: {},
      radio: "1",
      formedit: {},
    };
  },
 //挂载时渲染页面
  mounted(){
   this.getCon();
  },
    
   

  methods: {
     //保存页面时进行的接口
      save(){
         this.$axios({
            url:'/gym/venue/update',
            method:'post',
            data:{
              venues:[{name:this.formedit.name,
          phone:this.formedit.phone,
          address:this.formedit.address,
          email:this.formedit.email,
          sort:this.formedit.sort,
          image:this.image,
          status:this.formedit.status,
          description:this.formedit.description,
          },
            {capacity:this.formInline.container1,spaceName:this.formInline.name1},{capacity:this.formInline.container2,spaceName:this.formInline.name2},{capacity:this.formInline.container3,spaceName:this.formInline.name3}
          
          ]
            }
         }).then((res)=>{
           if(res.data.code==200){
          this.$message.success('修改成功')
         }
         else{
           this.$message.error('修改失败')
         }
         })
      },
      //页面一进来渲染的部分
      getCon(){
        this.$axios({
            url:'/gym/venue/find',
            method:'post',
            data:{
               id:this.id
            }
        }).then((res)=>{
          console.log(res.data.data[1])
            if(res.data.code==200){
        this.$message.success('查询成功')
        this.formedit=res.data.data[1]

         //formeInline表格里的数据
         console.log(res.data.data)
          if(res.data.data[2]){
          this.formInline.name1=res.data.data[0].spaceName;
           this.formInline.container1=res.data.data[0].capacity;
           this.formInline.name2=res.data.data[1].spaceName;
           this.formInline.container2=res.data.data[1].capacity;
           this.formInline.name3=res.data.data[2].spaceName;
           this.formInline.container3=res.data.data[2].capacity;
          }else if(res.data.data[1]){
            this.formInline.name1=res.data.data[0].spaceName;
           this.formInline.container1=res.data.data[0].capacity;
           this.formInline.name2=res.data.data[1].spaceName;
           this.formInline.container2=res.data.data[1].capacity;
          }else{
            this.formInline.name1=res.data.data[0].spaceName;
           this.formInline.container1=res.data.data[0].capacity;
          }
          
            if(res.data.data[1].status==2){
                // 判断表单的状态，从而把状态勾选上
              this.formedit.status="2"
            }else{
               this.formedit.status="1"
            }
            }
            else{
                this.$message.error('查询失败')
            }
          
        })
    },



    onSubmit() {
      console.log("submit!");
    },

    // 照片那里的方法
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>
<style scoped>
.zhuti{
  margin-left: 200px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #606266;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-col #div11 {
  position: relative;
  height: 50px;
}
#div11 > span {
  display: block;
  position: absolute;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 24px;
}

.el-form {
  margin-top: 20px;
}
#item1 {
  font-weight: bold;
}
#img1 {
  width: 600px;
  height: 200px;
  border-radius: 5%;
}
#div3 {
  width: 1000px;
  height: 200px;
}
.img2 {
  width: 200px;
  height: 100px;
  margin-right: 20px;
}
.el-form-item {
  margin-left: 50px;
  position: relative;
  margin-bottom: 20px;
}
.el-input {
  position: absolute;
  left: 20px;
  width: 300px;
}
.xuanze {
  position: absolute;
  left: 30px;
}
#scwj {
  float: left;
}
#scwj:after {
  content: "";
  display: block;
  clear: both;
}
#div11 {
  margin-bottom: 20px;
}
#item2 {
  margin-top: 20px;
  margin-bottom: 0;
}
#tupian {
  height: 150px;
}
.shangchuan {
  text-align: left;
  width: 300px;
}

#tupian{
  margin-bottom: 50px;
}


#div4 {
  text-align: left;
  width: 500px;

  margin-left: 100px;
}
#div5 {
  margin-top: 20px;
  text-align: left;
}
#save {
  text-align: center;
}

.venuedescript {
  position: absolute;
  left: 20px;
  width: 500px;
}
.imgload{
  float: left;
  margin-left: 150px;
  border-radius: 10%;
  width: 300px;
  height: 150px;
}
</style>